<%--
  Created by IntelliJ IDEA.
  User: veneno
  Date: 2020/11/18
  Time: 9:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="js/jquery.min.js"></script>
  <link rel="stylesheet" href="css/default.css">
  <link rel="stylesheet" href="css/bootstrap-table.css">
  <link rel="stylesheet" href="css/bootstrap-table.min.css">
  <script src="js/bootstrap.min.js"></script>
  <script src="js/bootstrap-table.min.js"></script>
  <script src="js/bootstrap-table-zh-CN.min.js"></script>
  <script src="js/sweetalert.min.js"></script>
  <script src="js/custom.js"></script>
  <title>显示页面</title>
</head>

<body>

<%--头部信息栏--%>
<jsp:include page="pages/head.jsp"></jsp:include>



<section>
  <div class="mainwrapper">

    <!--左边垂直导航栏开始-->
    <div class="leftpanel">

      <!--垂直头像信息栏开始-->
      <div class="media profile-left">
        <a class="pull-left profile-thumb" href="#updateinfo" data-toggle="modal">
          <img class="img-circle" src="images/profile1.png" alt="">
        </a>
        <div class="media-body">
          <h4 class="media-heading">${loginUser.username}</h4>
          <span class="user-options"><a href="#updateinfo" data-toggle="modal"><i class="glyphicon glyphicon-user"></i></a>
                              <a href="#updatePass" data-toggle="modal"><i class="glyphicon glyphicon-cog"></i></a>
                              <a href="loginOut"><i class="glyphicon glyphicon-log-out"></i></a>
							</span>
        </div>
      </div>
      <!--垂直头像信息栏结束-->



      <ul class="nav nav-pills nav-stacked">
        <li class="parent active"><a href="#"><i class="fa fa-home"></i> <span>图书管理</span></a>
          <ul class="children">
            <li class="active"><a href="main.jsp">图书信息管理</a></li>
            <li><a href="borrowBooks.jsp">图书借阅</a></li>
            <li><a href="returnBooks.jsp">图书归还</a></li>
            <li><a href="searchBorrowBooks.jsp">借阅查询</a></li>
          </ul>
        </li>
        <li class="parent"><a href="#"><i class="fa fa-database"></i> <span>管理员管理</span></a>
          <ul class="children">
            <li><a href="adminMang.jsp">管理员信息管理</a></li>
          </ul>
        </li>


        <li class="parent"><a href="#"><i class="fa  fa-columns"></i> <span>读者管理</span></a>
          <ul class="children">
            <li><a href="readerMang.jsp">读者信息管理</a></li>
          </ul>
        </li>

      </ul>

    </div>
    <!--左边垂直导航栏结束-->


    <!--页面主体部分开始-->
    <div class="mainpanel">
      <div class="contentpanel">
        <!--面板开始-->
        <div class="panel panel-default">

          <!--面板标题开始-->
          <div class="panel-heading">
            <div class="panel-btns">
              <a href="#" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
            </div><!-- panel-btns -->
            <h4 class="panel-title">查询</h4>
            <p>查询图书</p>
          </div>
          <!--面板标题结束-->

          <!--面板主体开始-->
          <div class="panel-body">
            <!--图书数据展示-->
            <div class="row">
              <div class="col-md-12">
                <div class="col-md-12">
                  <table class="table table-hover table-bordered" id="table"></table>
                </div>
              </div>
            </div>
            <!--图书数据展示结束-->
          </div>
          <!--面板主体结束-->


        </div>
        <!--面板结束-->

      </div><!-- contentpanel -->

    </div>
    <!--页面主体部分结束-->

  </div><!-- mainwrapper -->
</section>


<%--模态框开始--%>
<%--个人信息模态框--%>
<form class="form-horizontal" action="" id="model_form1"><!--保证样式水平不混乱-->
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="updateinfo" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="z-index: 1048">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="ModalLabel">个人信息</h4>
        </div>

        <div class="modal-body">

          <input type="hidden" name="id" value="${loginUser.id}">
          <input type="hidden" name="password" value="${loginUser.password}">
          <input type="hidden" name="name" value="${loginUser.name}">




          <!--正文-->

          <div class="form-group">
            <label for="name" class="col-sm-3 control-label">用户名</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="name" name="username" readonly value="${loginUser.username}">
              <label class="control-label" for="name" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="phone" class="col-sm-3 control-label">联系号码</label>
            <div class="col-sm-7">
              <input type="text" minlength="11" maxlength="11" class="form-control" onblur="checkPhone();" id="phone" name="phone"  placeholder="请输入您的联系号码" value="${loginUser.phone}">
              <label class="control-label" for="phone" id="phoneErro" style="display: none"></label>
            </div>
          </div>


          <!--正文-->

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" onclick="updateInfo()">修改</button>
        </div>
      </div>
    </div>
  </div>
</form>
<%--个人信息模态框结束--%>

<%--密码模态框--%>
<form class="form-horizontal" id="model_form2"><!--保证样式水平不混乱-->
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="updatePass" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="z-index: 1048">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="ModalLabel1">修改密码</h4>
        </div>

        <div class="modal-body">
          <input type="hidden" name="id" value="${loginUser.id}">
          <input type="hidden" name="username" value="${loginUser.username}">
          <input type="hidden" name="phone" value="${loginUser.phone}">
          <input type="hidden" name="name" value="${loginUser.name}">


          <!--正文-->
          <div class="form-group">
            <label for="oldPass" class="col-sm-3 control-label">原密码</label>
            <div class="col-sm-7">
              <input type="password" class="form-control" id="oldPass" name="password"  placeholder="请输入您的原密码">
              <label class="control-label" for="oldPass" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="newPass" class="col-sm-3 control-label">新密码</label>
            <div class="col-sm-7">
              <input type="password" class="form-control" id="newPass" name="newPass"  placeholder="请输入您的新密码">
              <label class="control-label" for="newPass" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="newPass1" class="col-sm-3 control-label">确认密码</label>
            <div class="col-sm-7">
              <input type="password" class="form-control" id="newPass1" name="newPass1"  placeholder="请输入您的新密码">
              <label class="control-label" for="newPass1" style="display: none"></label>
            </div>
          </div>
          <!--正文-->

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" onclick="updatePass()">修改</button>
        </div>
      </div>
    </div>
  </div>
</form>
<%--密码模态框结束--%>


<%--修改书籍模态框开始--%>
<form class="form-horizontal" action="" id="model_updateBook"><!--保证样式水平不混乱-->
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="updateBookInfo" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="z-index: 1048">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="ModalLabel">修改书籍</h4>
        </div>

        <div class="modal-body">
          <input type="hidden" id="bookId" name="id">

          <!--正文-->
          <div class="form-group">
            <label for="cardID" class="col-sm-3 control-label">isbn编号</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="isbn" name="isbn">
              <label class="control-label" for="isbn" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="name" class="col-sm-3 control-label">书名</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="bookName" name="bookName">
              <label class="control-label" for="bookName" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="phone" class="col-sm-3 control-label">作者</label>
            <div class="col-sm-7">
              <input type="text" minlength="11" maxlength="11" class="form-control" id="author" name="author">
              <label class="control-label" for="phone" style="display: none"></label>
            </div>
          </div>


          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">类型</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="type" name="type">
              <label class="control-label" for="type" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">出版社</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="press" name="press">
              <label class="control-label" for="press" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">日期</label>
            <div class="col-sm-7">
              <input type="date" class="form-control" id="date" name="date">
              <label class="control-label" for="date" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">数量</label>
            <div class="col-sm-7">
              <input type="number" class="form-control" id="count" name="count">
              <label class="control-label" for="count" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">价格</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="price" name="price">
              <label class="control-label" for="price" style="display: none"></label>
            </div>
          </div>

          <!--正文-->

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" onclick="updateBooks()">修改</button>
        </div>
      </div>
    </div>
  </div>
</form>
<%--修改书籍模态框结束--%>

<%--添加书籍模态框开始--%>
<form class="form-horizontal" action="" id="model_addBook"><!--保证样式水平不混乱-->
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="addBookInfo" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="z-index: 1048">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="ModalLabel">添加书籍</h4>
        </div>

        <div class="modal-body">

          <!--正文-->
          <div class="form-group">
            <label for="cardID" class="col-sm-3 control-label">isbn编号</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="isbn" name="isbn">
              <label class="control-label" for="isbn" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="name" class="col-sm-3 control-label">书名</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="bookName" name="bookName">
              <label class="control-label" for="bookName" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="phone" class="col-sm-3 control-label">作者</label>
            <div class="col-sm-7">
              <input type="text" minlength="11" maxlength="11" class="form-control" id="author" name="author">
              <label class="control-label" for="phone" style="display: none"></label>
            </div>
          </div>


          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">类型</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="type" name="type">
              <label class="control-label" for="type" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">出版社</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="press" name="press">
              <label class="control-label" for="press" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">日期</label>
            <div class="col-sm-7">
              <input type="date" class="form-control" id="date" name="date">
              <label class="control-label" for="date" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">数量</label>
            <div class="col-sm-7">
              <input type="number" class="form-control" id="count" name="count">
              <label class="control-label" for="count" style="display: none"></label>
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">价格</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="price" name="price">
              <label class="control-label" for="price" style="display: none"></label>
            </div>
          </div>

          <!--正文-->

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" onclick="addBooks()">添加</button>
        </div>
      </div>
    </div>
  </div>
</form>
<%--添加书籍模态框结束--%>


<script>
  $("#table").bootstrapTable({
    url:"getAllBooks",
    method:"get",
    sidePagination: "client",
    pageList: [10, 20, 30, 50],
    cache:false,
    striped:true,
    pagination:true,
    sortable:true,
    sortOrder:"asc",
    search:true,
    showRefresh: true,
    clickToSelect:true,
    showToggle: true,
    columns:[
      { field: 'id', title: 'id',visible:false },
      { field: 'SerialNumber', title: '序号',
        formatter: function (value, row, index) {
          return index+1;
        }
      },
      { field: 'isbn', title: 'ISBN' },
      { field: 'bookName', title: '书名' },
      { field: 'author', title: '作者' },
      { field: 'type', title: '类型' },
      { field: 'press', title: '出版社' },
      { field: 'date', title: '日期' },
      { field: 'count', title: '数量' },
      { field: 'price', title: '金额' },
      { field: 'operate',
        title: '操作',
        align: 'center',
        valign: 'middle',
        width: 200,
        events: {
          'click #edit': function (e, value, row, index) {
            $('#bookId').val(row.id);
            $('#isbn').val(row.isbn);
            $('#bookName').val(row.bookName);
            $('#author').val(row.author);
            $('#type').val(row.type);
            $('#press').val(row.press);
            $('#date').val(row.date);
            $('#count').val(row.count);
            $('#price').val(row.price);
          },
          'click #delete': function (e, value, row, index) {
            deleteInfo(row.id);
          },
          'click #add': function (e, value, row, index) {
          }
        },
        formatter: function (value, row, index) {
          var result = "";
          result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#updateBookInfo">编辑</button>';
          result += '<button id="add" class="btn btn-success" data-toggle="modal" data-target="#addBookInfo" style="margin-left:10px;">添加</button>';
          result += '<button id="delete" class="btn btn-danger" style="margin-left:10px;">删除</button>';
          return result;
        }
      }
    ]
  })

  function deleteInfo(id) {
    $.ajax({
      type: 'post',
      url: 'deleteBook',
      dataType: 'json',
      data: {
        id: id
      },
      success: function (data) {
        if (data.msg == 'ok') {
          $('#table').bootstrapTable('refresh');
          swal("删除成功！",{icon: "success",timer:1500})
        }
        else {
          swal("删除失败,该书还在外借中！",{icon: "error",timer:1500})
        }
      }
    })
  }


  function addBooks(){
    $.ajax({
      type: 'post',
      url: 'addBook',
      dataType: 'json',
      data: $("#model_addBook").serialize(),
      success: function (data) {
        if (data.msg == 'ok') {
          $('#table').bootstrapTable('refresh');
          swal("添加成功！",{icon: "success",timer:1500})
          $("#addBookInfo").modal('hide')
          $('#model_addBook')[0].reset(); //重置表单
        }
        else {
          swal("添加失败！",{icon: "error",timer:1500})
        }
      }
    })
  }

  function updateBooks(){
    $.ajax({
      type: 'post',
      url: 'updateBook',
      dataType: 'json',
      data: $("#model_updateBook").serialize(),
      success: function (data) {
        if (data.msg == 'ok') {
          $('#table').bootstrapTable('refresh');
          swal("修改成功！",{icon: "success",timer:1500})
          $("#updateBookInfo").modal('hide')
          $('#model_updateBook')[0].reset(); //重置表单
        }
        else {
          swal("修改失败！",{icon: "error",timer:1500})
        }
      }
    })
  }
</script>

<script>

  <%--模态框方法--%>
  /*修改用户信息的事件*/
  function updateInfo(){
    if ($("#phoneErro").text()!==""){
      swal("号码格式不对哦！",{icon: "error",timer:1500})
      return ;
    }
    $.ajax({
      url:"updateAdminInfo",
      type: "post",
      dataType: "json",
      data:$("#model_form1").serialize(),
      success:function (result){
        if (result.msg==="ok"){
          $("#updateinfo").modal('hide')
          swal("修改成功！",{icon: "success",timer:1500})
        }
      },
      error:function (){
        swal("修改失败！",{icon: "error",timer:1500})
      }
    })
  }
  //修改密码
  function updatePass(){
    var oldPass=$("#oldPass").val()
    var newPass=$("#newPass").val()
    var newPass1=$("#newPass1").val()
    if(oldPass===""||newPass===""||newPass1===""){
      swal("输入密码不为空！",{icon:"error",timer:1800})
      return false;
    } else if (newPass!==newPass1){
      swal("两次密码不匹配！",{icon:"error",timer:1800})
      return false;
    }else {
      $.ajax({
        url:"updateAdminPass",
        type: "post",
        dataType: "json",
        data:$("#model_form2").serialize(),
        success:function (result){
          if (result.msg==="ok"){
            $("#oldPass").val("")
            $("#newPass").val("")
            $("#newPass1").val("")
            $("#updatePass").modal('hide')
            swal("修改成功！",{icon: "success",timer:1500})
          }
          if (result.msg==="PassError"){
            $("#oldPass").val("")
            $("#newPass").val("")
            $("#newPass1").val("")
            swal("原密码错误，修改失败！",{icon: "error",timer:1500})
          }
        },
        error:function (){
          $("#oldPass").val("")
          $("#newPass").val("")
          $("#newPass1").val("")
          swal("修改失败！",{icon: "error",timer:1500})
        }
      })
      return true;
    }

  }

  //检验数据格式
  function checkPhone() {
    var phoneMsg={
      color:'red',
      display:'block',
      textAlign:'left',
    }
    var phoneReg=/^[1][3,4,5,7,8][0-9]{9}$/
    var phone=$("#phone").val()
    if(!phoneReg.test(phone)){
      $("#phoneErro").text("手机号码格式有误！")
      $("#phoneErro").css(phoneMsg)
      $("#phone")[0].focus()
    }else {
      $("#phoneErro").text("")
    }
  }
</script>





</body>
</html>
